<template>
  <div>
    <el-form inline>
      <el-form-item label="状态">
        <el-select v-model="searchDto.status">
          <el-option label="新建" value="0"/>
          <el-option label="已分配" value="1"/>
          <el-option label="已领取" value="2"/>
          <el-option label="已完成" value="3"/>
          <el-option label="有异常" value="4"/>
        </el-select>
      </el-form-item>
      <el-form-item label="关键字">
        <el-input></el-input>
      </el-form-item>
      <el-form-item>
        <el-button>查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="addDialog=true">新增</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="exportAll">导出</el-button>
      </el-form-item>
      <el-form-item>
        <el-dropdown>
          <span class="el-dropdown-link">
              <el-button type="primary">
               批量操作<el-icon class="el-icon--right"><arrow-down/></el-icon>
              </el-button>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="receivePurchaseFun">领取采购单</el-dropdown-item>
              <el-dropdown-item>批量删除</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-form-item>
    </el-form>
  </div>
  <div>
    <el-table :data="purchaseListData" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="id" label="采购单id"/>
      <el-table-column prop="assigneeId" label="采购人id"/>
      <el-table-column prop="assigneeName" label="采购人名"/>
      <el-table-column prop="phone" label="联系方式"/>
      <el-table-column prop="priority" label="优先级"/>
      <el-table-column label="状态">
        <template #default="scope">
          <span v-if="scope.row.status==0">
            <el-text type="success">新建</el-text>
          </span>
          <span v-else-if="scope.row.status==1">
            <el-text>已分配</el-text>
          </span>
          <span v-else-if="scope.row.status==2">
            <el-text>已领取</el-text>
          </span>
          <span v-else-if="scope.row.status==3">
            <el-text>已完成</el-text>
          </span>
          <span v-else-if="scope.row.status==4">
            <el-text>有异常</el-text>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="wareId" label="仓库id"/>
      <el-table-column prop="amount" label="总金额"/>
      <el-table-column prop="createTime" label="创建日期"/>
      <el-table-column prop="updateTime" label="更新日期"/>
      <el-table-column label="操作">
        <template #default="scope">
          <el-text @click="openModify(scope.row)">修改</el-text>
          <el-divider direction="vertical"/>
          <el-text @click="assignmentOpen(scope.row);" type="primary">分配</el-text>
          <el-divider direction="vertical"/>
          <el-text>删除</el-text>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="demo-pagination-block">
    <el-pagination
        hide-on-single-page
        v-model:current-page="searchDto.pageNum"
        v-model:page-size="searchDto.pageSize"
        :page-sizes="[3, 5, 8]"
        :small="small"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="searchDto.totals"
    />
  </div>
  <div>
    <el-dialog
        v-model="addDialog"
        title="新增采购单"
        width="30%"
        :before-close="handleClose"
    >
      <div>
        <el-form :model="addPurchaseData">
          <el-form-item label="重要性">
            <el-input v-model="addPurchaseData.priority"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="addDialog = false">取消</el-button>
        <el-button type="primary" @click="addSubmit">
          提交
        </el-button>
      </span>
      </template>
    </el-dialog>
    <el-dialog
        v-model="assignmentDialog"
        title="采购单分配"
        width="40%"
    >
      <div>
        <el-radio-group v-model="assignmentData.assigneeId">
          <el-radio v-for="item in assignmentUserList" :label="item.id" :key="item.id">{{ item.userName }}</el-radio>
        </el-radio-group>
      </div>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="assignmentDialog = false">取消</el-button>
        <el-button type="primary" @click="assignmentSubmit">
          提交
        </el-button>
      </span>
      </template>
    </el-dialog>
    <el-dialog
        v-model="modifyDialog"
        title="修改"
        width="30%"
    >
      <div>
        <el-form :model="modifyPurchaseData" label-width="100">
          <el-form-item label="id">
            <el-input v-model="modifyPurchaseData.id" disabled></el-input>
          </el-form-item>
          <el-form-item label="仓库id">
            <el-input v-model="modifyPurchaseData.wareId"></el-input>
          </el-form-item>
          <el-form-item label="采购人id">
            <el-input v-model="modifyPurchaseData.assigneeId"></el-input>
          </el-form-item>
          <el-form-item label="采购人用户名">
            <el-input v-model="modifyPurchaseData.assigneeName"></el-input>
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input v-model="modifyPurchaseData.phone"></el-input>
          </el-form-item>
          <el-form-item label="优先级">
            <el-input v-model="modifyPurchaseData.priority"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-input v-model="modifyPurchaseData.status"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="modifyDialog = false">取消</el-button>
        <el-button type="primary" @click="modifySubmit">
          提交
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>

</template>

<script setup>
import {onMounted, reactive, ref, watch} from 'vue'
import {
  addPurchase, exportPurchase, getPurchaseById,
  getPurchasePageList,
  modifyPurchase,
  PurchaseAssignment,
  receivePurchase
} from '@/api/home/warehouse/purchase'
import {getUserListFromRoleKeys} from '@/api/home/user/index'
import {ArrowDown} from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";

let addDialog = ref(false)
let modifyDialog = ref(false)
let assignmentDialog = ref(false)
let purchaseListData = ref([])
let assignmentUserList = ref([])
let multipleSelection = ref([])
let searchDto = reactive({
  pageNum: 1,
  pageSize: 5,
  status: ''
})
let modifyPurchaseData = ref({})
let addPurchaseData = reactive({
  priority: '',
  wareId: ''
})
let assignmentData = reactive({
  purchaseId: '',
  assigneeId: ''
})

function handleSelectionChange(val) {
  multipleSelection.value = val.map(item => {
    return item.id
  })
}

function addSubmit() {
  addPurchase(addPurchaseData).then(() => {
    getPurchaseListData()
  })
  addDialog.value = false
}

function exportAll() {
  exportPurchase().then(response => {
    // 将 ArrayBuffer 转换为 Blob
    const blob = new Blob([response.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}); // 注意修改 MIME 类型以匹配你的文件
    // 创建一个临时的 a 标签来触发下载
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.setAttribute('download', new Date().getTime()+'.xlsx'); // 设置下载的文件名
    document.body.appendChild(link);
    link.click();
    // 清理：移除 a 标签并释放 URL 对象
    document.body.removeChild(link);
    URL.revokeObjectURL(link.href);
  }).catch(error => {
    console.log("文件下载错误",error)
    ElMessage.error('文件下载错误');
  });
}

/**
 * 获取采购单列表
 */
function getPurchaseListData() {
  getPurchasePageList(searchDto).then(res => {
    purchaseListData.value = res.data.records
    searchDto.totals = res.data.total - 0
  })
}

function getassignmentUserList() {
  getUserListFromRoleKeys(['procurementAdmin', 'warehouseAdmin', 'admin']).then(res => {
    assignmentUserList.value = res.data
  })
}

/*打开分配对话框*/
function assignmentOpen(node) {
  if (node.status !== 0) {
    return ElMessage.error("状态不支持分配！")
  }
  getassignmentUserList()
  assignmentData.purchaseId = node.id
  assignmentDialog.value = true
}

/*打开修改对话框*/
function openModify(node) {
  getPurchaseById(node.id).then(res => {
    modifyPurchaseData.value = res.data
  }).finally(() => {
    modifyDialog.value = true
  })
}

/*分配*/
function assignmentSubmit() {
  PurchaseAssignment(assignmentData).then(() => {
    getPurchaseListData()
  })
}

/*领取采购单*/
function receivePurchaseFun() {
  receivePurchase(multipleSelection.value).then(() => {
    getPurchaseListData()
  })
}

function modifySubmit() {
  modifyPurchase(modifyPurchaseData.value).then(() => {
    getPurchaseListData()
  }).finally(() => {
    modifyDialog.value = false
  })
}

onMounted(() => {
  getPurchaseListData()
})
watch([() => searchDto.pageNum, () => searchDto.pageSize], () => {
  getPurchaseListData()
})

</script>

<style scoped>

</style>
